<template>
  <div >
      <titleHead />
    
    <el-col :span="4">
      <text2 />
    </el-col>
    <el-col :span="4">
      <text2 />
    </el-col>
    <el-col :span="16">
      <el-row :gutter="50">
    <el-col :span="12">
    
       <dv-scroll-ranking-board :config="config" style="width:500px;height:300px" />
       
    </el-col>
     <el-col :span="12">
      <dv-scroll-ranking-board :config="config" style="width:500px;height:300px" />
    </el-col>
      </el-row>
    </el-col>
      <el-col :span="24">
        <lineAndBar :height="'20vh'" />
    </el-col>
  </div>
</template>

<script>
import img from "./img/1@2x.png";
// import lineAndBar from "@/components/echart/lineAndBar"
import lineAndBar from "@/components/echart/lineAndBar"
const winwidth = (window.screen.availWidth / 5) * 0.6;
const winHeight = (window.screen.availHeight / 2) * 0.6;
export default {
  data() {
    return {
      img,
      config: {
       
        columnWidth: [50],
        data: [
        {name:"121",value:10},
        {name:"122",value:20},
        {name:"123",value:30},
        {name:"1224",value:40},
        ],
      },
      winwidth: winwidth,
      winHeight: winHeight,
    };
  },
  components:{lineAndBar}
};
</script>

<style>
.boxall {
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  position: relative;
  margin-bottom: 1rem;
  z-index: 10;
}
.boxall:before {
  position: absolute;
  content: "";
}

.alltitle {
  font-size: 0.5rem;
  color: rgb(255, 185, 0);
  text-align: left;
  padding: 1rem;
  position: relative;
}
.alltitle span {
  font-size: 0.2rem;
  color: rgba(255, 255, 255, 0.35);
  display: block;
  text-transform: uppercase;
}
.boxnav span {
  color: #ffb43e;
  background: rgba(255, 255, 255, 0.29);
  font-size: 2rem;
  font-weight: bold;
  padding: 0.1rem 0.05rem;
  margin-right: 0.05rem;
}
.info_2 {
  margin: 0;
  padding: 0;
}
.text_2 {
  background-color: #0c1629;
}
.rate-content{
    padding:2rem 0;
}
</style>